<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的显示方式</title>
    <style>
        div, h1, p {
            width: 65px;
            height: 50px;
            border: 1px solid pink
        }
        a,span{
            width: 50px;
            height: 50px;
            border: 1px solid pink;
        }
        input{
            width: 50px;
            height: 50px;
        }
        .t1{
            /*转出块元素 取值:inline inline-block block table none(隐藏) 等*/
            display: block;
            width: 200px;
            height: 50px;
            background: skyblue;
            /*圆角*/
            /*一个参数 四个角*/
            /*两个参数 左上和右下 右上和左下*/
            border-radius: 3px;
        }
        /*当鼠标经过时 背景颜色和字体要发生改变*/
        .t2{
            background: skyblue;
            color: white;
            display: block;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            text-decoration: none;
            border-radius: 30px 10px;
            border: none;
        }
        .t2:hover{
            color: red;
            background-color: yellow;
        }
    </style>
</head>
<body>
<!--元素的显示方式
块元素 block 典型代表:div h1~h6 p
  特点:
    1.独占一行
    2.支持设置宽高
行内元素 inline 典型代表 a span i
  特点
    1.和其他的行内元素共用一行
    2.不支持设置宽高,宽高靠内容撑起
行内块 inline-block 典型代表:input
  特点:
    1.既有块元素能够设置宽高的特点
    2.也能和其他行内块或行内元素共用一行
以上三种显示方式可以通过display属性来转换
-->
<div>小艺</div>
<h1>小艺</h1>
<p>小艺</p>
<a href="">小艺</a>
<span>小艺</span>
<input type="haha">
<a href="" class="t1">百度</a>
<a href="" class="t2">查看详情</a>
</body>
</html>